<div id="tab" class="tab-pane active">

    <div class="row">

        <div class="small text-muted">
            <i class="fa fa-clock-o"></i><span class="showDate"></span>
        </div>

        <div class="col-lg-12 col-md-12">

            <div class="chat-discussion">

                {empty name='msgList'}
                <P>查看新消息</P>
                {else /}
                {volist name='msgList' id='msg'}
                {if $msg.reply_client_id == null}
                <div class="chat-message left">
                    <img class="message-avatar" src="__PUBLIC__/static/admin/img/a1.jpg" alt="">
                    <div class="message ">
                        <a class="message-author" href="">{$msg.sender}</a>
                        <span class="message-date"> {$msg.create_time}</span>
                        <span class="message-content">
                           {$msg.content}
                        </span>
                    </div>
                </div>
                {else if $msg.reply_client_id !== null /}
                <div class="chat-message right">
                    <img class="message-avatar" src="__PUBLIC__/static/admin/img/profile_small.jpg" alt="">
                    <div class="message">
                        <a class="message-author" href=""> {$msg.sender}</a>
                        <span class="message-date">{$msg.send_time}</span>
                        <span class="message-content">
                          {$msg.content}
                        </span>
                    </div>
                </div>
                {/if}
                {/volist}
                {/empty}
            </div>
        </div>
        <div class="col-lg-12 col-md-12">
            <div class="chat-message-form" id="chatList">
                <form class="ajax-form" action="{:url('reply')}" method="post" data-success-callback="replyRefresh()">
                    <div class="form-group">
                        <input type="hidden" name='reply_client_id' value="{$send_client_id}">
                    </div>
                    <div class="form-group">
                        <input type="hidden" name='reply_feedback_id' value="{$feedback_id}">
                    </div>
                    <div class="form-group">
                        <textarea id="reply_content" class="form-control message-input" name="content" placeholder="Enter message text" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary pull-right">发送</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#chatList').find("button[type=submit]").click(function () {
        $('#chatList').find("form.ajax-form").submit();
    });
    //消息回复
    $('#chatList').find("form.ajax-form").validate({
        errorElement : 'div',
        errorClass : 'help-block',
        //自定义错误消息放到哪里
        errorPlacement : function(error, element) {
            //element.next().remove();//删除显示图标
            //element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
            element.closest('.form-group').append(error);//显示错误消息提示
        },
        //给未通过验证的元素进行处理
        highlight : function(element) {
            $(element).closest('.form-group').addClass('has-error has-feedback');
        },
        //验证通过的处理
        success : function(label) {
            var el=label.closest('.form-group').find("input");
            //el.next().remove();//与errorPlacement相似
            //el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
            label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");
            label.remove();
        },
        submitHandler : function(form) {
            ajaxFormSubmitFunc(form);
        }
    });

    //窗口的日期显示
    var nowDate = new Date();
    $('.small  > .showDate').text(nowDate);

    //success-callback
    function replyRefresh () {
        $(".list-group-item >.bg-info").trigger("click");
    }

    //窗口滚动条位于底端
    var scrollHeight = $('.chat-discussion').prop('scrollHeight');
    $('.chat-discussion').scrollTop(scrollHeight) ;

</script>